<template>
  <!-- 直播回放 -->
  <div class="streamplayback" id="streamplayback">
    <Header></Header>
    <!--本来应该是导航，（方便全局替换）-->
    <!-- <HHeader></HHeader> -->
    <div class="streamingdetail_cont">
      <div class="academicCont_crumbs">
        <span>
          <router-link :to="{name:'home'}">首页</router-link>
        </span>
        <i class="iconfont icon-youjiantou"></i>
        <span>
          <router-link :to="{name:'streamingytable'}">我的课表</router-link>
        </span>
        <i class="iconfont icon-youjiantou"></i>
        <span>直播回放</span>
      </div>
      <div class="streamingdetail_cont_main">
        <div class="streamingdetail_cont_main_video">
          <div class="streamingdetail_cont_main_video_video">
            <video
              src="https://journal-alliance.oss-cn-beijing.aliyuncs.com/help/%E5%BD%95%E6%92%AD_1.mp4"
              ref="video"
              controls
              id="streamingdetail_cont_main_video_video"
            ></video>
            <div class="streamingdetail_cont_main_video_video_cover" @click="playervideo()">
              <div class="streamingdetail_cont_main_video_video_cover_img"></div>
              <div class="streamingdetail_cont_main_video_video_cover_cover"></div>
              <div class="streamingdetail_cont_main_video_video_cover_btn">
                <i class="iconfont icon-bofang1"></i>
              </div>
            </div>
          </div>
          <!-- <div class="streamingdetail_cont_main_video_menu">
            <ul>
              <li v-for="(item,index) in courmunulist" :key="index">
                <p>
                  <span class="streamingdetail_cont_main_video_menu_left">回放</span>
                  <span v-html="item.Title"></span>
                </p>
              </li>
            </ul>
          </div>-->
        </div>
        <!-- <div class="streamingdetail_cont_main_info">
          <div class="streamingdetail_cont_main_info_tit">
            <p>
              <span v-html="this.courmunulistdetail.CourseName"></span>
              <span v-if="this.courmunulistdetail.IsApply == false">试看5分钟</span>
            </p>
            <p>
              <span>累计报名  13万人</span>
              <span>好评度  99%</span>
            </p>
          </div>
          <div class="streamingdetail_cont_main_info_btn" @click="streamingcourse()">预约下期直播课</div>
        </div>-->
      </div>
    </div>
    <NaviRight></NaviRight>
    <FootBase></FootBase>
    
  </div>
</template>

<script>
//juqery
import Swiper from "swiper";
import util from "../../../assets/script/util";
import QRCode from "qrcodejs2";
export default {
  inject: ["reload"],
  data() {
    return {
      courmunulistdetail: [],
      courmunulist: []
    };
  },
  methods: {
    // 播放视频
    playervideo() {
      $(".streamingdetail_cont_main_video_video_cover").css("display", "none");
      // this.$refs.video.src = res.data.data.Path
      $("#streamingdetail_cont_main_video_video")
        .get(0)
        .play();
    },

    // // 直播回放目录
    gethuifmenu() {
      // 加密完成
      this.$httphelper
        .post("/api/LmCourseApi/GetLiveBackPagePart", {
          Sign: "string",
          OpCataId: this.$route.query.openid,
          OpAuthorId: localStorage.getItem("AuthorId")
        })
        .then(res => {
          // 判断此视频是否有回放
          if (res.data.data.IsPlayBack == false) {
            this.$message({
              message: "此视频暂无回放",
              type: "warning"
            });
            $(".streamingdetail_cont_main_video_video_cover").css(
              "display",
              "block"
            );
          } else {
            $(".streamingdetail_cont_main_video_video_cover").css(
              "display",
              "none"
            );
            this.$refs.video.src = res.data.data.PlayBackPath;
            $("#streamingdetail_cont_main_video_video")
              .get(0)
              .play();

            // var video = document.getElementById('streamingdetail_cont_main_video_video')
            // console.log(video)
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 预约下期直播课
    streamingcourse() {
      this.$router.push({
        path: "/streaming/streamingHome"
      });
    }
  },
  mounted() {},
  watch: {
    // 新窗口打开页面，解决浏览器拦截问题
    jumpUrl() {
      if (this.jumpUrl) {
        window.open(this.jumpUrl, "_blank");
      }
      this.jumpUrl = null;
    }
  },
  created() {
    this.gethuifmenu();
  },
  destroyed() {
    if (this.timer) {
      //如果定时器在运行则关闭
      clearInterval(this.timer);
    }
  }
};
</script>

<style lang="less" scoped>
#streamplayback {
  .streamingdetail_cont {
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom: 50px;
    .academicCont_crumbs {
      width: 1140px;
      height: 20px;
      margin: 0 auto;
      position: relative;
      margin-top: 28px;
      text-align: left;
      line-height: 20px;
      padding-left: 10px;
      span:nth-child(1) a,
      span:nth-child(3) a {
        color: #000000;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
      }
      i {
        color: #767c82;
        font-size: 18px;
        margin-left: 10px;
        font-weight: bold;
      }
      span:nth-child(5) {
        color: #c00812;
        font-size: 16px;
        margin-left: 10px;
        font-weight: bold;
        cursor: pointer;
      }
    }
    .streamingdetail_cont_main {
      width: 1155px;
      height: auto;
      // background: #000;
      margin: 0 auto;
      margin-top: 26px;
      .streamingdetail_cont_main_video {
        width: 100%;
        height: 650px;
        .streamingdetail_cont_main_video_video {
          width: 100%;
          height: 100%;
          float: left;
          position: relative;
          video {
            width: 100%;
            height: 100%;
          }
          .streamingdetail_cont_main_video_video_cover {
            .streamingdetail_cont_main_video_video_cover_cover {
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.6);
              position: absolute;
              top: 0;
              left: 0;
            }
            .streamingdetail_cont_main_video_video_cover_img {
              width: 100%;
              height: 100%;
              background: url("../../../../static/zb/zjhb.png") no-repeat;
              background-size: cover;
              position: absolute;
              top: 0;
              left: 0;
            }
            .streamingdetail_cont_main_video_video_cover_btn {
              width: 96px;
              height: 96px;
              border-radius: 50%;
              color: #fff;
              text-align: center;
              line-height: 109px;
              background-color: #08cb6a;
              background-color: #23b8ff;
              position: absolute;
              z-index: 1;
              left: 50%;
              top: 50%;
              -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
              cursor: pointer;
              i {
                margin-left: 6px;
                font-size: 40px;
                color: #fff;
                position: relative;
                top: -5px;
                left: 2px;
              }
            }
            .streamingdetail_cont_main_video_video_cover_btn:hover {
              background-color: #12a7ff;
            }
          }
        }
        .streamingdetail_cont_main_video_menu {
          width: 330px;
          height: auto;
          // height: 100%;
          float: right;
          background: #131313;
          ul {
            padding: 8px;
            width: 100%;
            height: 490px;
            overflow: hidden;
            overflow-y: auto;
            li:hover {
              p {
                span:nth-child(1) {
                  background: #23b8ff;
                  color: #333;
                }
                span {
                  color: #23b8ff;
                }
              }
            }
            li {
              list-style: none;
              width: 94%;
              margin: 0 auto;
              border-bottom: 1px solid #2a2a2a;
              padding: 15px 0;
              cursor: pointer;
              .streamingdetail_cont_main_video_menu_left {
                display: inline-block;
                width: 35px;
                height: 20px;
                background: #777777;
                text-align: center;
                line-height: 20px;
                color: #333;
                font-weight: bold;
                border-radius: 3px;
                font-size: 14px;
              }
              span:nth-child(2) {
                float: right;
                width: 85%;
                color: #c7c7c7;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                white-space: nowrap;
              }
            }
          }
        }
      }
      .streamingdetail_cont_main_info {
        width: 100%;
        height: 92px;
        padding: 14px 16px;
        background-color: #232323;
        box-sizing: border-box;
        .streamingdetail_cont_main_info_tit {
          width: 850px;
          height: 64px;
          float: left;
          p:nth-child(1) {
            font-size: 22px;
            span:nth-child(1) {
              color: #fff;
            }
            span:nth-child(2) {
              color: #ff4f23;
            }
          }
          p:nth-child(2) {
            margin-top: 12px;
            color: rgba(255, 255, 255, 0.5);
            span {
              display: inline-block;
              margin-right: 32px;
            }
          }
        }
        .streamingdetail_cont_main_info_btn {
          width: 293px;
          height: 50px;
          float: right;
          background: #23b8ff;
          line-height: 50px;
          text-align: center;
          color: #fff;
          font-size: 18px;
          cursor: pointer;
          margin-top: 9px;
        }
        .streamingdetail_cont_main_info_btn:hover {
          background-color: #12a7ff;
        }
      }
    }
  }
}
@media screen and (max-width: 1010px) {
}
::-webkit-scrollbar {
  width: 8px;
  height: 16px;
  // background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  // background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}
</style>